@import "../commons/variables.scss";
@import "../commons/px2rem.scss";

body {
    font-family: "Microsoft YaHei", "Microsoft YaHei", "Helvetica Neue", Arial,
        HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
    position: relative;
    width: 100vw !important;
    height: 100vh !important;
    background-color: $bodyBackground;
    margin: 0 auto;
}

html, body {
overflow: hidden;
}

/* 遮挡布 */
.cover {
    background-color: rgb(0,0,0,0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

/* 回到游戏 */
.goback {
    position: relative;
    top: 75%;
    text-align: center;

    .goback-btn {
        background-color: #02bfff;
    }
}

.goback button {
    width: 60%;
}

.container {
    position: relative;
    height: 100%;
    width: px2rem(640);
    margin: 0 auto;
    background-color: transparent;
    background: #EEEFF5;

    .main-container {
        width: 80%;

        // 在横屏状态下的样式
        @media (orientation: landscape) {
            position: absolute;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.5);
        }

        // 在竖屏状态下的样式
        @media (orientation: portrait) {
            position: absolute;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        background: #20212e;
        box-sizing: border-box;
        border-radius: px2rem(8);
    }
}

.account-header {
    border-top-left-radius: px2rem(8);
    border-top-right-radius: px2rem(8);
    height: px2rem(32);
    line-height: px2rem(32);
    text-align: center;
    font-size: px2rem(32);
    color: #d8d8db;
    font-weight: 400;
    padding-top: px2rem(20);

    .back-icon {
        position: absolute;
        top: px2rem(20);
        left: px2rem(30);
        color: #fff;
        cursor: pointer;

        .bi-chevron-left {
            width: px2rem(30);
            height: px2rem(30);
        }
    }
}

.account-content {
    width: 85%;
    height: auto;
    margin: px2rem(35) auto px2rem(10);

    .bind-bottom-tips {
        color: #d8d8db;
        font-size: px2rem(20);
        text-align: left;
    }
}

.pay-content {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-top: px2rem(20);
    padding-bottom: px2rem(45);
    border-bottom-left-radius: px2rem(8);
    border-bottom-right-radius: px2rem(8);

    .order-info {
        width: 90%;
        text-align: center;
        margin: 0 auto;
        padding-bottom: px2rem(20);

        .order-amount {
            color: #fff;
            font-size: px2rem(48);

            .amount {
                font-weight: 700;
                font-size: px2rem(48);
            }
        }
    }

    .pay-type-box {
        width: 90%;
        margin: px2rem(25) auto auto;
        display: flex;
        align-items: center;
        justify-content: center;

        .type-item {
            text-align: center;
            width: 100vw;
            height: px2rem(140);
            background-color: #31323e;
            border-radius: px2rem(4);
            box-sizing: border-box;
            padding-top: px2rem(10);
            cursor: pointer;
            margin-left: px2rem(12);

            .alipay-icon {
                position: relative;
                margin: 0 auto;
                top: (px2rem(12));
                width: px2rem(50);
                height: px2rem(80);
            }

            .wxpay-icon {
                position: relative;
                margin: 0 auto;
                top: (px2rem(12));
                width: px2rem(60);
                height: px2rem(80);
            }

            .item-text {
                position: relative;
                width: 100%;
                height: px2rem(30);
                line-height: px2rem(30);
                color: #d8d8db;
                font-size: px2rem(22);
                font-weight: 400;
            }
        }
    }
}
